
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Claude 官方 Chrome 扩展 - 学习卡片</title>
      <style>
        body { font-family: sans-serif; background-color: #f0f8ff; color: #333; display: flex; flex-direction: column; align-items: center; padding: 50px 20px; }
        .header h1 { font-size: 32px; }
        .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; width: 100%; max-width: 1200px; }
        .card-container { perspective: 1200px; cursor: pointer; height: 250px; }
        .card { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 0.7s; border-radius: 16px; box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
        .card-container.flipped .card { transform: rotateY(180deg); }
        .card-face { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; display: flex; flex-direction: column; box-sizing: border-box; border-radius: 16px; background-color: #fff; padding: 24px; }
        .card-back { background-color: #f0fff4; transform: rotateY(180deg); justify-content: space-between; }
        .card-category { font-size: 14px; color: #0052d9; margin-bottom: 8px; font-weight: 500; }
        .card-question { font-size: 20px; font-weight: 500; flex-grow: 1; display: flex; align-items: center; justify-content: center; text-align: center; }
        .card-answer-wrapper { flex-grow: 1; overflow-y: auto; }
        .card-answer { font-size: 15px; line-height: 1.7; }
        .card-footer { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 16px; margin-top: 16px; }
        .card-source { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 12px; margin-top: 12px; }
      </style>
    </head>
    <body>
      <div class="header">
        <h1>Claude 官方 Chrome 扩展 - 学习卡片</h1>
      </div>
      <div class="grid-container">
        
    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">概念</div>
          <div class="card-question">Claude Chrome 扩展程序主要旨在解决用户在日常网页浏览中遇到的哪四大核心痛点？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">概念</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">该扩展旨在解决四大核心痛点：1. 信息过载与时间压力，需要快速提炼内容摘要；2. 上下文切换导致的效率损耗；3. 浏览时对不理解内容的即时性解答需求；4. 跨语言资料的内容理解障碍。</div>
          </div>
          <div class="card-source">来源: 1. 它能解决什么问题？</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">特性</div>
          <div class="card-question">Claude Chrome 扩展的“侧边栏即时对话”功能是如何提升用户工作效率的？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">特性</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">该功能允许用户无需离开当前页面，随时唤出对话侧边栏与 AI 互动。这种“随叫随到”的方式避免了在不同应用或标签页间切换的麻烦，让 AI 辅助成为一种流畅的本能，从而极大提升信息处理效率和专注度。</div>
          </div>
          <div class="card-source">来源: 2. 核心功能概述</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">功能</div>
          <div class="card-question">在处理文档方面，Claude Chrome 扩展相比其他仅处理网页文本的工具有何独特之处？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">功能</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">与其他一些仅能处理网页文本的工具不同，Claude 扩展可以直接读取和分析用户在浏览器中打开的 PDF 文件。用户可以上传研究报告或财务报表，然后直接在侧边栏向 Claude 提问关于这份文档的具体细节。</div>
          </div>
          <div class="card-source">来源: 2. 核心功能概述</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">应用</div>
          <div class="card-question">对于一名需要进行竞品调研的市场分析师，Claude Chrome 扩展可以如何帮助她高效完成任务？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">应用</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">在浏览竞品网站时，她可以唤出 Claude 侧边栏，让其分析产品的目标用户和主要卖点。在阅读产品评测文章时，可以指令 Claude 总结其中的正面和负面评价。这让她无需阅读大量文本，就能快速构建起对竞品的全面认知。</div>
          </div>
          <div class="card-source">来源: 3. 使用场景</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">优势</div>
          <div class="card-question">相较于其他同类 AI 浏览器扩展，文档中提到的 Claude Chrome 扩展最核心的优势是什么？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">优势</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">其核心优势在于更强的上下文理解能力。Claude 模型以强大的长文本处理和推理能力著称，这意味着在处理长篇报告或复杂文档时，它能更准确地把握全文的逻辑和细微差别，提供的摘要和回答也更为精准。</div>
          </div>
          <div class="card-source">来源: 4. 优势与特色</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">限制</div>
          <div class="card-question">文档中指出了 Claude Chrome 扩展存在的三个潜在局限性，它们分别是什么？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">限制</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">三个潜在局限性是：1. 性能高度依赖网络连接和服务器负载，高峰时段可能出现延迟；2. 对于高度专业化或极其冷门的领域，其知识准确性可能不及领域专家；3. 免费版本的使用存在消息数量限制。</div>
          </div>
          <div class="card-source">来源: 4. 优势与特色</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">模式</div>
          <div class="card-question">Claude Chrome 扩展的免费版和专业版（Pro）在服务上有何主要区别？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">模式</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">免费版（Claude Free）存在动态的消息数量限制，适合轻度用户。专业版（Claude Pro）则提供比免费用户多至少5倍的使用量、高峰时段的优先访问权，以及体验最新功能的机会，更适合重度用户。</div>
          </div>
          <div class="card-source">来源: 5. 使用门槛与成本</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">特性</div>
          <div class="card-question">什么是 Claude Chrome 扩展的“快捷指令菜单”功能，它如何简化 AI 功能的调用？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">特性</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">它是内置于扩展中的一系列预设指令。当用户在任何网页的输入框中写作时，可以直接从菜单中选择如“总结”、“翻译”、“释义”等操作作用于选中的文本，这使得 AI 功能的调用变得更加直观快捷，几乎没有学习成本。</div>
          </div>
          <div class="card-source">来源: 2. 核心功能概述</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">入门</div>
          <div class="card-question">一个新用户如何快速开始使用 Claude Chrome 扩展？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">入门</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">用户需要完成几个简单步骤：1. 在 Chrome 网上应用店搜索“Claude”并安装官方扩展；2. 将扩展图标固定到浏览器工具栏；3. 点击图标并使用 Google、Apple 或邮箱账户登录（或注册）；4. 登录后即可在任意网页上唤出侧边栏开始使用。</div>
          </div>
          <div class="card-source">来源: 6. 上手指南</div>
        </div>
      </div>
    </div>

      </div>
    </body>
    </html>
